<!-- 我的卷包-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>我的卷包</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>
	<style>

	/* pages/coupon/my-coupon/my-coupon.wxss */

	.Cate {
	  position: fixed;
	  left: 0;
	  top: 0;
	  z-index: 100;
	  width: 100%;
	  height: .90rem;
	  background: #fff;
	  border-bottom: 1px solid #eee;
	}

	.Cate div {
	  flex: 1;
	  border: 0px solid #f00;
	}

	.Cate text {
	  display: block;
	  margin: auto;
	  font: .26rem/.70rem "";
	  color: #666;
	  text-align: center;
	  border-bottom: .05rem solid #fff;
	}

	.Cate div.on text {
	  font-weight: 700;
	  color: #FF502D;
	  /* border-bottom-color: #F9AE30;  */
	}

	swiper {
	  display: block;
	  width: 100%;
	  min-height: 100vh;
	  padding-top: .90rem;
	  box-sizing: border-box;
	  border: 0px solid #f00;
	}

	scroll-div {
	  height: 100%;
	  border: 0px solid #f00;
	}

	.card {
	  margin: .20rem;
	  position: relative;
	  /* border: 1rem solid #eee; */
	  background: #fff;
	  border-radius: .10rem;
		padding:0.1rem 0.2rem;
	}

	.bt {
	  width: 1.50rem;
	  height: .50rem;
	  background: #fff;
	  border: 1px solid #ff502d;
	  border-radius: .32rem;
	  color: #ff502d;
	}

	.b_color {
	  width: 1.50rem;
	  height: .50rem;
	  background: #fff;
	  border: 1px solid #999;
	  border-radius: .32rem;
	  color: #999;
	}

	.coupon-time {
	  height: .80rem;
	  padding: 0 .30rem;
	  position: relative;
	}

	.lading{
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: .30rem;
		color: #aaa;
		margin-bottom: .50rem;

	}


.flex-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}



	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<div>
			<div class="card" v-for="(item,index) in list" :key="index">
				<div class="flex-between">
					<div style="width: 70%;">
						<div class="flex" style="color: #FF502D;">
							<div  style="position: relative;margin-top: .20rem;font-size:0.24rem">￥</div>
							<div  style="font-size:0.6rem;">{{item.face_amount}}</div>
							<div  style="padding-left: .20rem;position: relative;margin-top: .20rem;font-size:0.28rem;">满{{item.rule_money}}使用</div>
						</div>
						<div  style="color:#444;font-size:0.3rem;margin-top: .20rem;font-weight: 700;">{{item.title}}</div>
						<div  style="font-size:0.22rem;color:#999;margin-top: .20rem;">{{item.createtime}}-{{item.ending_date}}</div>
					</div>
					<div style="border-left: 1px solid #eee;padding:.20rem 0;padding-left: .40rem;">
						<div class="bt flex-center" style="margin-top: .10rem;font-size:0.28rem;" @click="open_menu(2);" hover-class="hover-class">立即使用</div>
					</div>
				</div>
			</div>
			<div v-if="list.length != 0" class="lading">
			  <div  v-if="lading == 1">上拉加载</div>
			  <div  v-if="lading == 2">正在加载...</div>
			  <div  v-if="lading == 3">没有更多数据了</div>
		  </div>
			<div v-else class="no-data">
					<img src="../image/order.png" alt="">
					<div class="">
						暂无使用优惠券
					</div>
			</div>
		</div>

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
        noData: {
            img: "../../images/nodata/order.png",
            title: "暂无使用优惠券",
            content: "快去使用享受商品价格优惠"
        },
        // tab切换
				list:[],//未使用  0
				page:1,
				size:20,
				lading:1,
		},

		mounted: function(){
				this.getData()
				this.setCustomRefreshHeaderInfo()// 下拉刷新
				this.vmaddEventListener()//上拉加载
		},

		methods: {
			// 下拉刷新
			setCustomRefreshHeaderInfo: function(){
				api.setCustomRefreshHeaderInfo({
							bgColor: '#F8F8F8',
							tips: {
									pull: '下拉刷新',
									threshold: '松开立即刷新',
									load: '正在刷新'
							}
					}, function() {
							vm.getData() //获取数据
							// setTimeout(function() {
							//     api.refreshHeaderLoadDone()//关闭下拉刷新状态
							// }, 1000)
					});
			},
			// 上拉加载
			vmaddEventListener: function () {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
					vm.getDatapush(false)//获取数据  上拉加载
				});
			},

			//获取数据
			getData: function (loader){
				this.lading = 2
				let param = {
					page: 1,
				  size: this.size,
				  state:0
				}
				AjaxSafe({
			   	url:"/xapp/user/userCouponList",
					loader:loader,
					data:param,
					success: function(res) {
					    vm.list = res.list
							if(vm.list.length >= res.totalRow ){
								vm.lading = 3
							}else{
								vm.lading = 1
							}
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
					},
					failed: function(err){
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
							alert("网络故障！");
					}
				});
			},
			//获取数据  分页
			getDatapush: function (loader){
				if (this.lading != 1) return

				this.lading = 2
				++this.page
				let param = {
					page: this.page,
				  size: this.size,
				  state:0
				}
				AjaxSafe({
			   	url:"/xapp/user/userCouponList",
					loader:loader,
					data:param,
					success: function(res) {
					    vm.list.push(...res.list)
						  if(vm.list.length >= res.totalRow ){
								vm.lading = 3
							}else{
								vm.lading = 1
							}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},



		},



	});
}
</script>
</html>
